﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>首页</title>
    <script src="/Apm/js/CMSList.js"></script>
    <script src="/js/echarts.js"></script>
    <link href="/css/Form.css" rel="stylesheet" type="text/css" />
    <style>
        .page {
            display: flex;
            flex-wrap:wrap;
            width: 100%;
            height: 100%;
            overflow-y: auto;
        }
        .red {
            background-color: #FF5722;
        }

        .green {
            background-color: #009688;
        }

        .blue {
            background-color: #1E9FFF;
        }

        .yellow {
            background-color: #FFB800;
        }
        .index-module {
            display: flex;
            flex-direction: column;
            width: 25rem;
            height: 30rem;
            margin: 1rem;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }
        .big-module {
            width: 52rem;
        } 
        .index-module-title {
            padding: 1rem;
            color: #fff;
            font-family: '楷体';
            font-weight: bold;
        }
        .index-module-content{
            height:calc(100% - 50px);
        }
        .index-Chart {
            height: calc(100% - 1rem);
            padding: 0.5rem;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="index-module ">
            <div class="index-module-title blue">
                <span>入库款</span>
            </div>
            <div class="index-module-content">
                <div id="OnHouse" class="index-Chart">

                </div>
            </div>

        </div>

        <div class="index-module ">
            <div class="index-module-title green">
                <span>出库款</span>
            </div>
            <div class="index-module-content">
                <div id="OutHouse" class="index-Chart">

                </div>
            </div>

        </div>

        <div class="index-module big-module">
            <div class="index-module-title yellow">
                <span>销量前十</span>
            </div>
            <div class="index-module-content">
                <div id="SellTop10" class="index-Chart">

                </div>
            </div>

        </div>

        <div class="index-module big-module">
            <div class="index-module-title blue">
                <span>入库统计</span>
            </div>
            <div class="index-module-content">
                <div id="OnHouseStatistics" class="index-Chart">

                </div>
            </div>

        </div>

        <div class="index-module  big-module">
            <div class="index-module-title green">
                <span>出库统计</span>
            </div>
            <div class="index-module-content">
                <div id="OutHouseStatistics" class="index-Chart">

                </div>
            </div>

        </div>
        
    </div>
</body>
</html>
<script>
    //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
    layui.use('layer', function () {
        var layer = layui.layer;

        //…
        BindData();
    });

    /**
     * 初始化数据
     */
    function BindData() {
        GetOnHouse();
        GetOutHouse();
        GetSellTop10();
        GetOnHouseStatistics();
        GetOutHouseStatistics();
    }
    /**
     * 入库款图表
     */
    function GetOnHouse() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('OnHouse'));
        ajaxget({
            url: 'api/FriendFlower/GetYearTotalStorage?Token=' + MyPublic.getToken(),
            success: function (data) {
                var option = {
                    title: {
                        text: '入库款统计',
                        subtext: data.Year,
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },

                    series: [
                        {
                            name: '款项',
                            type: 'pie',
                            radius: ['30%', '40%'],
                            label: {
                                normal: {
                                    formatter: '{a|{a}}\n{hr|}\n {b|{b}：} {per|{d}%}  ',
                                    backgroundColor: '#eee',
                                    borderColor: '#aaa',
                                    borderWidth: 1,
                                    borderRadius: 4,
                                    rich: {
                                        a: {
                                            color: '#999',
                                            lineHeight: 22,
                                            align: 'center'
                                        },
                                        hr: {
                                            borderColor: '#aaa',
                                            width: '100%',
                                            borderWidth: 0.1,
                                            height: 0
                                        },
                                        b: {
                                            fontSize: 12,
                                            lineHeight: 33
                                        },
                                        per: {
                                            color: '#eee',
                                            backgroundColor: '#334455',
                                            padding: [2, 4],
                                            borderRadius: 2
                                        }
                                    }
                                }
                            },
                            data: [
                                { value: data.TotalWF, name: '未付' },
                                { value: data.TotalYF, name: '已付' }

                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ],
                    color: ['#FF5722', '#5FB878']
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

            }
        });

        
    }
    /**
     * 出库款图表
     */
    function GetOutHouse() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('OutHouse'));
        ajaxget({
            url: 'api/FriendFlower/GetYearTotalOutbound?Token=' + MyPublic.getToken(),
            success: function (data) {
                var option = {
                    title: {
                        text: '出库款统计',
                        subtext: data.Year,
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    series: [
                        {
                            name: '款项',
                            type: 'pie',
                            radius: ['30%', '40%'],
                            label: {
                                normal: {
                                    formatter: '{a|{a}}\n{hr|}\n {b|{b}：} {per|{d}%}  ',
                                    backgroundColor: '#eee',
                                    borderColor: '#aaa',
                                    borderWidth: 1,
                                    borderRadius: 4,
                                    rich: {
                                        a: {
                                            color: '#999',
                                            lineHeight: 22,
                                            align: 'center'
                                        },
                                        hr: {
                                            borderColor: '#aaa',
                                            width: '100%',
                                            borderWidth: 0.1,
                                            height: 0
                                        },
                                        b: {
                                            fontSize: 12,
                                            lineHeight: 33
                                        },
                                        per: {
                                            color: '#eee',
                                            backgroundColor: '#334455',
                                            padding: [2, 4],
                                            borderRadius: 2
                                        }
                                    }
                                }
                            },
                            data: [
                                { value: data.TotalWS, name: '未收' },
                                { value: data.TotalYS, name: '已收' }

                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ],
                    color: ['#FF5722', '#5FB878']
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        });

        
    }
    /**
     * 销量前十
     */
    function GetSellTop10() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('SellTop10'));
        var date = new Date();
        var year = date.getFullYear();
        ajaxget({
            url: 'api/FriendFlower/GetSellTop10?Token=' + MyPublic.getToken(),
            success: function (data) {
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '销量前十统计',
                        subtext: year+'年度',
                        x: 'center'
                    },
                    tooltip: {},
                    color: ['#FFB800'],
                    dataset: {
                        // 提供一份数据。
                        dimensions: ['FlowerName', 'TotalNum'],
                        source: data
                    },
                    // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
                    xAxis: { type: 'category' },
                    // 声明一个 Y 轴，数值轴。
                    yAxis: {},
                    // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
                    series: [
                        {
                            type: 'bar',
                            label: {
                                normal: {
                                    show: true,
                                    color: '#000',
                                    position: 'top'
                                }
                            }
                        }
                    ]
                }
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        });
        
    }
    /**
     * 入库统计
     */
    function GetOnHouseStatistics() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('OnHouseStatistics'));
        var date = new Date();
        var year = date.getFullYear();
        ajaxget({
            url: 'api/FriendFlower/GetMonthOrderStorage?Token=' + MyPublic.getToken(),
            success: function (data) {
                var option = {
                    title: {
                        text: '入库款统计',
                        subtext: year + '年度',
                        x: 'center'
                    },
                    tooltip: {},
                    color: ['#1E9FFF'],
                    dataset: {
                        // 提供一份数据。
                        dimensions: ['日期', '总价'],
                        source: data
                    },
                    // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
                    xAxis: { type: 'category' },
                    // 声明一个 Y 轴，数值轴。
                    yAxis: {},
                    // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
                    series: [
                        {
                            type: 'line',
                            smooth: true
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        });
        
    }
    /**
     * 出库统计
     */
    function GetOutHouseStatistics() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('OutHouseStatistics'));
        var date = new Date();
        var year = date.getFullYear();
        ajaxget({
            url: 'api/FriendFlower/GetMonthOrderOutbound?Token=' + MyPublic.getToken(),
            success: function (data) {
                var option = {
                    title: {
                        text: '出库款统计',
                        subtext: year+'年度',
                        x: 'center'
                    },
                    tooltip: {},
                    color: ['#009688'],
                    dataset: {
                        // 提供一份数据。
                        dimensions: ['日期', '总价'],
                        source: data
                    },
                    // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
                    xAxis: { type: 'category' },
                    // 声明一个 Y 轴，数值轴。
                    yAxis: {},
                    // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
                    series: [
                        {
                            type: 'line',
                            smooth: true
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        });
        
    }
</script>